<template>
  <div class="page">
    <div style="margin-top: 20px">
      <z-form ref="form" :config="cpFormConfig" @handleEvent="handleEvent">
        <template #slot1>这是插槽</template>
      </z-form>
    </div>

    <z-poup v-model="showPoup" v-model:value="formConfig.formData.time"
            @update:value="formConfig.formData.time = $event" round
            title="选择时间"
            @click-overlay="showPoup = false"/>
  </div>
</template>

<script lang="ts" setup>
import {computed, reactive, ref, getCurrentInstance, onMounted, watch} from 'vue';
import ZForm from '@/components/Z-UI/ZForm/index.vue';
import type {Cells} from '@/components/Z-UI/ZForm/type'

import ZPoup from '@/components/Z-UI/ZTime/index.vue'

const showPoup = ref(false)

const form = ref(null)

const formConfig = reactive({
  labelWidth: '100px',
  labelAlign: 'left',
  formData: {
    // username: 'name',
    // gender: 'male',
    // hobby: '',
    // fruit: ['a'], // checkbox类型初始化为数组
    // birthday: '',
    // rili: '',
    // agreement: false
    time: ''
  } as any,
  enums: {
    genderEnum: [
      {text1: '男', value1: 'male'},
      {text1: '女', value1: 'female'}
    ],
    hobbyEnum: [
      {label: '篮球', value: 'a'},
      {label: '足球', value: 'b'},
      {label: '唱歌', value: 'c'}
    ],
    fruitEnum: [
      {label: '苹果', value: 'a'},
      {label: '香蕉', value: 'b'},
      {label: '橙子', value: 'c'}
    ],
  },
  formItems: [
    {
      title: '个人信息',
      cells: [
        {
          type: 'input',
          name: 'username',
          label: '用户名',
          required: true,
          placeholder: '请输入用户名',
        },
        {
          type: 'select',
          name: 'gender',
          label: '性别',
          placeholder: '请选择性别',
          enumKey: 'genderEnum',
          columnsFieldNames: {text: 'text1', value: 'value1'},
          required: true,
          event: 'genderChange',
        },
        {
          type: 'slot',
          name: 'slot1',
          label: '插槽',
          required: true,
          bind: {}
        },
      ]
    },
    {
      title: '额外信息',
      cells: [
        {
          type: 'radio',
          name: 'hobby',
          label: '爱好',
          placeholder: '请选择爱好',
          enumKey: 'hobbyEnum',
          columnsFieldNames: {text: 'label', value: 'value'},
          required: true,
          event: 'hobbyChange',
          show: false
        },
        {
          type: 'checkbox',
          name: 'fruit',
          label: '水果',
          placeholder: '请选择水果',
          enumKey: 'fruitEnum',
          columnsFieldNames: {text: 'label', value: 'value'},
          required: true,
          event: 'fruitChange',
        },
        {
          type: 'datePicker',
          name: 'birthday',
          label: '日期',
          placeholder: '请选择日期',
          bind: {
            columnsType: ['year', 'month'],
            minDate: new Date(2021, 0, 1),
            maxDate: new Date(2025, 5, 1),
          },
          required: true,
          event: 'birthdayChange'
        },
        {
          type: 'timePicker',
          name: 'time',
          label: '时间',
          placeholder: '请选择时间',
          bind: {},
          event: 'timeChange'
        },
        {
          type: 'calendar',
          name: 'rili',
          label: '日历',
          placeholder: '请选择日历',
          bind: {
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 5, 1),
          },
          required: true,
          event: 'riliChange'
        },
        {
          type: 'region',
          name: 'address',
          label: '地址',
          placeholder: '请选择地址',
          bind: {},
          required: true,
          event: 'regionChange'
        },
        {
          type: 'switch',
          name: 'agreement',
          label: '同意协议',
          required: true,
          event: 'switchChange',
        }
      ]
    }
  ],
  operatorList: [
    {label: '重置', event: 'reset', bind: {type: 'default', block: true, round: true}},
    {
      label: '下一步', event: () => {
        showPoup.value = true
      }, bind: {type: 'default', block: true, round: true}
    },
    {label: '提交', event: 'validate', bind: {type: 'primary', block: true, round: true}},
  ]
})

const cpFormConfig = computed(() => {
  // 根据性别控制爱好选项的显示
  const hobbyItem = formConfig.formItems.map(item => item.cells).flat().find(item => item.name === 'hobby') as Cells
  if (hobbyItem) {
    hobbyItem.show = formConfig.formData.gender === 'male'
    // 如果性别不是男性，清空爱好值
    if (!hobbyItem.show) {
      formConfig.formData.hobby = ''
      formConfig.formData.hobbyLabel = ''
    }
  }
  return formConfig
})

const handleEvent = async (key: string, value: any) => {
  console.log('handleEvent==', key, value)
  switch (key) {
    case 'genderChange':
      console.log('性别变更为：', value)
      // 性别变更时，如果选择女性，清空爱好
      if (value !== 'male') {
        formConfig.formData.hobby = ''
        formConfig.formData.hobbyLabel = ''
      }
      break
    case 'hobbyChange':
      console.log('爱好变更为：', value)
      break
    case 'fruitChange':
      console.log('水果变更为：', value)
      break
    case 'birthdayChange':
      console.log('生日变更为：', value)
      break
    case 'riliChange':
      console.log('日历变更为：', value)
      break
    case 'switchChange':
      console.log('开关变更为：', value)
      break
    case 'regionChange':
      console.log('地址变更为：', value)
      break
    case 'validate':
      // 处理表单提交
      console.log('处理表单提交：', value)
      const {valid, formData} = value
      if (valid) {

      }
      break
  }
}

</script>


<style scoped>
.page {
  height: 100vh;
  background-color: #f5f5f5;
  overflow-y: auto;
}
</style>